<template>
  <div class="project-menu">
    <div class="menu-slide animate__animated" :class="isHide?'animate__slideOutLeft':'animate__slideInLeft'">
      <el-menu
        :default-active="activeLink"
        class="el-menu-vertical"
        :collapse="isCollapse"
        :unique-opened = "true"
        text-color="#fff"
        background-color="rgba(0,0,0,0.6)"
        >
        <el-scrollbar style="height:100%;">
          <div class="menu-area-box" v-for="(lev1,lev1_idx) in menuList"  :key="lev1.path">
            <!--    折叠项 有子选项    -->
            <el-submenu class="menu-leve1" :index="lev1.path"  v-if="lev1.hasOwnProperty('children')">
              <template slot="title">
                <svg-icon :icon-class="lev1.meta.icon"/>
                <span slot="title" class="menu-title">{{lev1.meta.title}}</span>
              </template>
              <div class="level-item" v-for="(lev2,lev2_idx) in lev1.children" :key="lev2.path">
                <!--    二级菜单内容    -->
                <el-menu-item
                  v-if="!lev2.hasOwnProperty('children')"
                  @click="routerMove(basePath+'/'+lev1.path+'/'+lev2.path)"
                  class="submenu-item menu-leve2"
                  :index="basePath+'/'+lev1.path+'/'+lev2.path"
                  :key="lev2.path">
                  <template slot="title">
                    <svg-icon :icon-class="lev2.meta.icon"/>
                    <span class="menu-title" slot="title">{{lev2.meta.title}}</span>
                  </template>
                </el-menu-item>
                <!--    三级菜单内容     -->
                <el-submenu
                  v-else
                  class="submenu-item menu-leve2"
                  :index="lev2.path"
                  >
                  <template slot="title">
                    <svg-icon :icon-class="lev2.meta.icon"/>
                    <span slot="title" class="menu-title">{{lev2.meta.title}}</span>
                  </template>
                  <div class="level-item" v-for="(lev3,lev3_idx) in lev2.children" :key="lev3.path">
                    <!--   没有四级    -->
                    <el-menu-item
                      class="menu-leve3"
                      v-if="!lev3.hasOwnProperty('children')"
                      @click="routerMove(basePath+'/'+lev1.path+'/'+lev2.path+'/'+lev3.path)"
                      :index="basePath+'/'+lev1.path+'/'+lev2.path+'/'+lev3.path">
                      <svg-icon :icon-class="lev3.meta.icon"/>
                      <span class="menu-title" slot="title">{{lev3.meta.title}}</span>
                    </el-menu-item>
                    <!--   含有四级    -->
                    <el-submenu
                      v-else
                      class="menu-leve3"
                      :index="basePath+'/'+lev1.path+'/'+lev2.path+'/'+lev3.path">
                      <template slot="title">
  <!--                      <i class="iconfont" :class="'wl-icon-'+lev3.path"></i>-->
                        <svg-icon :icon-class="lev3.meta.icon"/>
                        <span slot="title" class="menu-title">{{lev3.meta.title}}</span>
                      </template>
                      <el-menu-item
                        v-for="(lev4,lev4_idx) in lev3.children"
                        :key="lev4.path"
                        class="menu-leve4"
                        @click="routerMove(basePath+'/'+lev1.path+'/'+lev2.path+'/'+lev3.path+'/'+lev4.path)"
                        :index="basePath+'/'+lev1.path+'/'+lev2.path+'/'+lev3.path+'/'+lev4.path">
  <!--                      <i class="iconfont" :class="'wl-icon-'+lev4.path"></i>-->
                        <svg-icon :icon-class="lev4.meta.icon"/>
                        <span class="menu-title" slot="title">{{lev4.meta.title}}</span>
                      </el-menu-item>
                    </el-submenu>
                  </div>
                </el-submenu>
              </div>
            </el-submenu>
            <!--   普通没有子选项的     -->
            <el-menu-item class="menu-leve1" v-else :index="lev1.path" @click="routerMove(basePath+'/'+lev1.path)" v-show="!lev1.showMenu">
              <svg-icon :icon-class="lev1.meta.icon"/>
              <span class="menu-title" slot="title">{{lev1.meta.title}}</span>
            </el-menu-item>
          </div>
  <!--        <div class="menu-center el-menu-item" @click="goBackIndex" >-->
  <!--          <svg-icon style="color: #FFF;" icon-class="link"/>-->
  <!--          <span class="menu-title" slot="title">前往后台</span>-->
  <!--          <el-tooltip v-if="isCollapse" effect="dark" content="后台" placement="right">-->
  <!--            <div slot="content"><slot name="title">前往后台</slot></div>-->
  <!--            <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">-->
  <!--              <slot></slot>-->
  <!--            </div>-->
  <!--          </el-tooltip>-->
  <!--        </div>-->
          <div class="menu-center el-menu-item" @click="isCollapse=!isCollapse">
            <svg-icon style="color: #FFF;" icon-class="collapse" v-show="isCollapse"/>
            <svg-icon style="color: #FFF;" icon-class="not-collapse" v-show="!isCollapse"/>
            <span class="menu-title"  v-show="!isCollapse">折叠导航栏</span>
            <el-tooltip v-if="isCollapse" effect="dark" content="展开导航栏" placement="right">
              <div slot="content"><slot name="title">展开导航栏</slot></div>
              <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
                <slot></slot>
              </div>
            </el-tooltip>
          </div>
          <div class="menu-center el-menu-item" @click="isHide=true" >
            <svg-icon style="color: #FFF;" icon-class="eye"/>
            <span class="menu-title" slot="title">隐藏导航栏</span>
            <el-tooltip v-if="isCollapse" effect="dark" content="隐藏" placement="right">
              <div slot="content"><slot name="title">隐藏导航栏</slot></div>
              <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
                <slot></slot>
              </div>
            </el-tooltip>
          </div>
        </el-scrollbar>
      </el-menu>
    </div>
    <div class="iconfont  showBtn" v-show="isHide" @click="isHide=false">
      <svg-icon icon-class="swagger"></svg-icon>
    </div>
  </div>

</template>

<script>
import store from "@/store";

export default {
  name: "Menu",
  data() {
    return {
      isHide:true,
      isCollapse: true,
      menuList:[],
      activeLink: '/bigScreen/product/productCategorize',
      basePath:'/bigScreen',
    };
  },
  computed:{
    activeLinkFun(){
        return 'index'
    }
  },
  watch:{
    isCollapse(){
      localStorage.setItem('b_collapse',this.isCollapse);
    },
    isHide(){
      localStorage.setItem('b_hide',this.isHide);
    }
  },
  mounted() {
    this.activeLink = this.$router.history.current.path;
    this.isCollapse = JSON.parse(localStorage.getItem('b_collapse')||false);
    this.isHide = JSON.parse(localStorage.getItem('b_hide')||false);
    /* 从系统菜单中获取配置的路径 */
    this.menuList = this.$store.state.permission.bigScreen[0].children;

  },
  methods: {
    refInit() {
      this.isCollapse = JSON.parse(localStorage.getItem('b_collapse')||false);
      this.isHide = JSON.parse(localStorage.getItem('b_hide')||false);
      /* 从系统菜单中获取配置的路径 */
      this.menuList = this.$store.state.permission.bigScreen[0].children;
    },
    goBackIndex(){
      this.$router.push({path:'/'});
    },
    routerMove(e){
      this.activeLink = e;
      this.$router.push({path:e});
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/sy-styles/color.scss";
.menu-logo{
  display: block;
  width: 80px;
  height: 80px;
  margin: 10px auto;
}
.menu-center{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
}
.iconfont{
  font-size: 22px!important;
  margin-right: 5px;
}
.menu-slide{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  z-index: 9999;
  background-color: rgba($--menu-background-color-new,0.6);
}
.el-menu-vertical{
  height: 100vh;
  background-color: rgba($--menu-background-color-new,0.6);
}
.el-scrollbar__wrap{
  overflow-x: hidden;
}
.el-menu{
  background-color:rgba($--menu-background-color-new,0.6);
}
//折叠栏 非折叠状态
.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
  min-height: 100%;
  //background-color: rgba(#333,0.8);
  .menu-title{
    margin-left: 5px;
  }
  .menu-leve1{
    text-align: left;
    font-size: 15px;
    .el-submenu__title{
      font-size: 15px;
    }
  }
  .menu-leve2,
  .menu-leve2>.el-submenu__title{
    text-align: left;
    font-size: 14px !important;
  }
  .menu-leve3{
    font-size: 13px;
    padding-left:75px !important;
  }
  .menu-leve3.el-submenu{
    padding-left:0px !important;
    .el-submenu__title{
      padding-left:75px !important;
      font-size: 13px;
    }
  }
  .menu-leve4{
    padding-left: 95px!important;
    font-size: 12px;
  }
}
//折叠栏 折叠状态
.el-menu--collapse{
  min-height: 100%;
  background-color: rgba($--menu-background-color-new,0.6);;
  //background-color: rgba(#333,0.8);
  .menu-logo{
    display: block;
    width: 30px;
    height: 30px;
    margin: 10px auto;
  }
  .menu-title{
    display: none;
  }
  // 折叠栏 折叠状态 hover

}
//折叠栏 折叠状态弹出层的样式
.el-menu--popup-right-start{
  background-color: rgba(#333,0.8);
  .el-menu-item-group__title{
    padding: 0;
  }
}
//显示按钮
.showBtn{
  position: fixed;
  color: rgba(#FFFFFF,0.3);
  top:47.5%;
  left: 0px;
  transform: translateY(-47.5%);
  transition: all 0.5s ease-in-out;
  z-index: 999;
  width: 25px;
  height: 25px;
  color: $--main-click-color-new;
  cursor: pointer;
  &:hover{
    left: 5px;
  }
}

.el-menu-item,.el-submenu__title{
  background-color: transparent !important;
}
.el-submenu.is-active /deep/.el-submenu__title{
  background-color: rgba($--main-click-color-new,0.6) !important;
}
.el-menu-item.is-active, .el-submenu.is-active>.el-submenu__title{
  background-color: rgba($--main-click-color-new,0.6) !important;
  color: $--main-background-color !important;
  .iconfont{
    color:$--main-background-color
  }
}
.el-menu-item.is-active .el-submenu__title{
  background-color: rgba($--main-click-color-new,0.6) !important;
  color: $--main-background-color !important;
}
.el-menu-item:hover{
  background-color:rgba($--main-click-color-new,0.6) !important;
  color: $--main-background-color !important;
  .iconfont{
    color:$--main-background-color
  }
}
/deep/ .el-submenu__title:hover{
  background-color: rgba($--main-click-color-new,0.6) !important;
  color: $--main-background-color !important;
  .iconfont{
    color:$--main-background-color
  }
}

.el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover, .el-menu--vertical .el-menu-item:hover{
  background-color: rgba($--main-click-color-new,0.6) !important;
}

.el-menu-item .el-submenu__title{
  height: 45px;
  line-height: 45px;
}
.el-submenu .el-menu-item{
  height: 45px;
  line-height: 45px;
}

</style>
<style lang="scss" scoped>
@import "~@/assets/sy-styles/color.scss";
.svg-icon{
  vertical-align: middle;
}
.el-submenu /deep/.el-submenu__title{
  background-color: transparent !important;
}
.project-menu /deep/.el-scrollbar__wrap{
  overflow-x: hidden !important;
}
/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner{
  background-color: $--main-float-color;
  border-color:$--main-float-color;
  color: #FFFFFF;
}
/deep/ .el-radio-button__inner{
  color: $--main-float-color;
}
/deep/ .el-radio-button__inner:hover{
  color: $--main-float-color;
}
/deep/ .el-submenu__title i{
  margin-top: -4px;
}

</style>
